import React, { useCallback } from 'react';
import { Card, Tag,Typography} from "antd";
import MyIcon from "@/components/icon";
import { useSelector, useDispatch } from 'react-redux';
import type { UserInfoType } from '@/types/login';
const {  Link } = Typography;
const colorList = ['gold','orange','lime','cyan','green']
function getRandomColor() {
  const randomIndex = Math.floor(Math.random() * colorList.length);
  const randomColor = colorList[randomIndex];
  return randomColor;
}

function Counter() {
  const userInfo = useSelector((state:any) => state.user.userinfo) as UserInfoType
  
  return (
    <Card className='w-80'>
    <div className=' h-full flex flex-col items-center '>
      <img className='mt-5 rounded-full' src={userInfo.headerImg} alt="" />
      <p><MyIcon type="icon_infopersonal" className="h-10 mr-2 mt-5" />{userInfo.username}</p>
      <p><MyIcon type="icon_infopersonal" className="h-10 mr-2" />{userInfo.worker}</p>
      <p><MyIcon type="icon_address1" className="h-10 mr-2" />{userInfo.address}</p>
      <p><MyIcon type="icon_edit" className="h-10 mr-2" />
      <Link href={userInfo.blogUrl} target="_blank">笔记地址</Link>
      </p>
      <p><MyIcon type="icon_github" className="h-10 mr-2" />
      <Link href={userInfo.github} target="_blank">github地址</Link>
      </p>
    </div>
    <div className='w-50 h-0.5 bg-gray-300 '></div>
    <div className='grid grid-cols-4 gap-1 mt-5 '>
      {userInfo.tags.map(item =>{
        return <Tag className='flex justify-center items-center' color={getRandomColor()} key={item}>
        {item}
        </Tag>
      })}
    </div>
    </Card>
  );
}

export default Counter;
